<template>
  <div style="width: 100%;">
    <div class="big-img">
    </div>
    <div class="type">
      <div v-for="(key,type) in types" v-if="key.records.length>0">
        <div class="top-container">
          <div v-for="(book,index) in key.records">
            <div v-if="index===0" class="top-background">
              <h3 class="top-title">{{ type }}</h3>
              <div class="book-one">
                <div class="jp-one"><span>1</span></div>
                <div class="oneBook-name">
                  <a style="font-size: 16px" @click="toDetail(book.id)">{{ book.name }}</a>
                  <span class="price">￥{{ book.price }}</span>
                </div>
                <div class="book-one-img">
                  <img height="100" :src="book.coverAddress" alt="">
                </div>
              </div>
            </div>
            <div v-if="index===1" class="seccend-background">
              <div v-if="index===1" class="book-tow ">
                <div class="jp-one book-tow-jp">
                  <span style="color: #c13e34;font-size: 12px; margin-top: 4px">2</span>
                </div>
                <a class="font" @click="toDetail(book.id)">{{ book.name }}</a>
              </div>
            </div>
            <div v-if="index===2" class="seccend-background1">
              <div class="book-tow">
                <div class="jp-one book-tow-jp">
                  <span style="color: #c13e34;font-size: 12px; margin-top: 4px">3</span>
                </div>
                <a class="font" @click="toDetail(book.id)">{{ book.name }}</a>
              </div>
            </div>
            <div v-if="index>2" class="seccend-background1">
              <div class="book-tow">
                <div class="book-tow-jp">
                  <span style="font-size: 18px; margin: 12px 0 0 12px">4</span>
                </div>
                <a class="font">{{ book.name }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "topBooks",
  data() {
    return {
      books: '',
      types: '',
    }
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      });
    }
  },
  mounted() {
    //获取图书类型
    this.$api.book.getBooksGroupByType().then((res) => {
      var data = res.data;
      if (data.success) {
        this.types = data.content;
        console.log(this.types)
        //console.log(res.data.content);
      } else {
        this.$message.error('服务器返回失败');
      }

    }).catch((resp) => {
      this.$message.error('服务器访问失败' + resp);
    })
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #ff0000;
  cursor: pointer;
}

.big-img {
  width: 100%;
  height: 250px;
  background-size: 100% 100%;
  background-image: url("../assets/lbt/top.jpg");
}

.type {
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  width: 1100px;
  flex-wrap: wrap;
}

.top-container {
  width: 320px;
  height: 400px;
  margin: 30px auto;
}

.seccend-background {
  width: 320px;
  padding-top: 90px;
  background-color: #eeeeee;
}

.seccend-background1 {
  width: 320px;

  background-color: #eeeeee;
}

.top-background {
  background-color: #c1cbd8;
  display: flex;
  height: 100px;
  flex-direction: column;
  align-items: center;
}

.top-title {
  height: 40px;
  font-weight: 100;
  color: #fff;
}

.book-one {
  width: 300px;
  height: 120px;
  display: flex;
  margin: 0 auto;
  background-color: #ffffff;
  align-items: center;
  box-shadow: -1px 1px 7px 0 #666;
}

.jp-one {
  height: 80px;
  width: 80px;
  background-image: url('../assets/jp.png');
  background-size: cover;
  display: flex;
  justify-content: center;
}

.jp-one span {
  margin-top: 20px;
  color: #c13e34;
  font-size: 22px;
}

.oneBook-name {
  display: flex;
  flex-direction: column;
  width: 130px;
  padding-left: 15px;

}

.price {
  color: #CF6B63;
  margin-left: 4px;
}

.book-one-img {

  transform: rotate3d(0, 1, 0, 20deg);
}

.book-tow {
  width: 290px;
  height: 40px;
  display: flex;
  background-color: #ffffff;
  align-items: center;
  padding-left: 10px;
  margin: 3px auto;
}

.book-tow-jp {
  width: 30px;
  height: 30px;
  padding-top: 2px;
  margin-left: -2px;
}

.font {
  margin-left: 15px;
  font-size: 12px;
}

</style>